<template>
  <view class="container">
    <!-- 支付成功图标 -->
    <view class="payment-success">
      <image src="/static/success-icon.png" class="success-icon" />
    </view>

    <!-- 支付金额 -->
    <view class="payment-amount">
      <text>预约成功</text>
    </view>

    <!-- 预约编号 -->
    <view class="booking-number">
      <text>预约编号：324252536363634</text>
    </view>

    <!-- 按钮 -->
    <view class="buttons">
      <button class="home-button" @click="goHome">返回首页</button>
      <button class="order-button" @click="goOrderDetails">预约详情</button>
    </view>
  </view>
</template>

<script setup>
// import { useRouter } from 'uni-app';

// const router = useRouter();

const goHome = () => {
  uni.redirectTo({
    url: '/pages/index/index'
  });
};

const goOrderDetails = () => {
  uni.navigateTo({
    url: '/packageIndex/repair/repairDetail/repairDetail?id=1'
  });
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  height: 100vh;
  background-color: #ffffff;
}


.title {
  font-size: 36rpx;
  font-weight: bold;
}

.back-button {
  padding: 10rpx;
}

.more {
  display: flex;
  align-items: center;
}

.iconfont {
  font-family: iconfont;
}

.payment-success {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100rpx;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
}

.payment-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40rpx;
}

.payment-amount text:first-child {
  font-size: 36rpx;
  font-weight: bold;
}

.payment-amount text:nth-child(2) {
  font-size: 48rpx;
  font-weight: bold;
  color: #ff5722;
}

.booking-number {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80rpx;
}

.home-button {
  width: 60%;
  background-color: #2196f3;
  color: white;
  padding: 15rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.order-button {
  width: 60%;
  background-color: #9e9e9e;
  color: white;
  padding: 15rpx;
  border-radius: 10rpx;
}
</style>